Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<h2 class="margin-none separator bottom"><i class="icon-group text-primary icon-fixed-width"></i> Employee Directory</h2> <div class="widget widget-heading-simple widget-body-gray widget-employees"> <div class="widget-body padding-none"> <div class="row"> <div class="col-md-4 listWrapper"> <div class="innerAll"> <form autocomplete="off" class="form-inline"> <div class="widget-search separator bottom"> <button type="button" class="btn btn-default pull-right"><i class="icon-search"></i></button> <div class="overflow-hidden"> <input type="text" value="" class="form-control" placeholder="Find someone .."> </div> </div> <select style="width: 100%;"> <optgroup label="Department"> <option value="design">Design</option> <option value="development">Development</option> </optgroup> </select> </form> </div> <span class="results">1490 Employees Found <i class="icon-circle-arrow-down"></i></span> <ul class="list unstyled"> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div> <div class="media-body"> <span class="strong">Adrian Demian</span> <span class="muted">contact@mosaicpro.biz</span> <i class="icon-envelope"></i> <i class="icon-phone"></i> <i class="icon-skype"></i> </div> </div> </li> <li class="active"> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div> <div class="media-body"> <span class="strong">Adrian Demian</span> <span class="muted">contact@mosaicpro.biz</span> <i class="icon-envelope"></i> <i class="icon-phone"></i> <i class="icon-skype"></i> </div> </div> </li> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div> <div class="media-body"> <span class="strong">Adrian Demian</span> <span class="muted">contact@mosaicpro.biz</span> <i class="icon-envelope"></i> <i class="icon-phone"></i> <i class="icon-skype"></i> </div> </div> </li> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div> <div class="media-body"> <span class="strong">Adrian Demian</span> <span class="muted">contact@mosaicpro.biz</span> <i class="icon-envelope"></i> <i class="icon-phone"></i> <i class="icon-skype"></i> </div> </div> </li> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div> <div class="media-body"> <span class="strong">Adrian Demian</span> <span class="muted">contact@mosaicpro.biz</span> <i class="icon-envelope"></i> <i class="icon-phone"></i> <i class="icon-skype"></i> </div> </div> </li> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div> <div class="media-body"> <span class="strong">Adrian Demian</span> <span class="muted">contact@mosaicpro.biz</span> <i class="icon-envelope"></i> <i class="icon-phone"></i> <i class="icon-skype"></i> </div> </div> </li> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div> <div class="media-body"> <span class="strong">Adrian Demian</span> <span class="muted">contact@mosaicpro.biz</span> <i class="icon-envelope"></i> <i class="icon-phone"></i> <i class="icon-skype"></i> </div> </div> </li> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div> <div class="media-body"> <span class="strong">Adrian Demian</span> <span class="muted">contact@mosaicpro.biz</span> <i class="icon-envelope"></i> <i class="icon-phone"></i> <i class="icon-skype"></i> </div> </div> </li> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div> <div class="media-body"> <span class="strong">Adrian Demian</span> <span class="muted">contact@mosaicpro.biz</span> <i class="icon-envelope"></i> <i class="icon-phone"></i> <i class="icon-skype"></i> </div> </div> </li> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img src="../assets/images/avatar-51x51.jpg" alt="Image" /></div> <div class="media-body"> <span class="strong">Adrian Demian</span> <span class="muted">contact@mosaicpro.biz</span> <i class="icon-envelope"></i> <i class="icon-phone"></i> <i class="icon-skype"></i> </div> </div> </li> </ul> </div> <div class="col-md-8 detailsWrapper"> <div class="ajax-loading hide"> <i class="icon-spinner icon-spin icon-4x"></i> </div> <div class="innerAll"> <div class="title"> <div class="row"> <div class="col-md-8"> <h3 class="text-primary">Adrian Demian</h3> <span class="muted">Senior Designer</span> </div> <div class="col-md-4 text-right"> <p class="muted">4 projects <a href=""><i class="icon-circle-arrow-right"></i></a></p> <div class="margin-bottom-none progress progress-small progress-inverse count-outside"> <div class="count">30%</div> <div class="progress-bar" role="progressbar" aria-valuenow="30" style="width: 30%;"></div> </div> </div> </div> </div> <hr/> <div class="body"> <div class="row"> <div class="col-md-4 overflow-hidden"> <!-- Profile Photo --> <div><a href="" class="thumb inline-block"><img src="../assets/images/avatar-2-large.jpg" alt="Profile" /></a></div> <div class="separator bottom"></div> <!-- // Profile Photo END --> <ul class="icons-ul separator bottom"> <li><i class="icon-envelope icon-li icon-fixed-width"></i> contac@mosaicpro.biz</li> <li><i class="icon-phone icon-li icon-fixed-width"></i> 00353 9191238101</li> <li><i class="icon-skype icon-li icon-fixed-width"></i> mosaicpro</li> </ul> </div> <div class="col-md-8 padding-none"> <h5 class="strong">About</h5> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <div class="row"> <div class="col-md-4 padding-none"> <h5 class="strong">Reports</h5> <a href="" class="btn btn-primary btn-small btn-block"><i class="icon-download-alt icon-fixed-width"></i> June</a> <a href="" class="btn btn-inverse btn-small btn-block"><i class="icon-download-alt icon-fixed-width"></i> May</a> <a href="" class="btn btn-inverse btn-small btn-block"><i class="icon-download-alt icon-fixed-width"></i> April</a> <div class="separator bottom"></div> </div> <div class="col-md-7 col-md-offset-1 padding-none"> <h5 class="strong">Skills</h5> <div class="progress progress-mini count-outside-primary add-outside"> <div class="count">100%</div> <div class="progress-bar progress-bar-primary" style="width: 100%;"></div> <div class="add">HTML</div> </div> <div class="progress progress-mini count-outside-primary add-outside"> <div class="count">90%</div> <div class="progress-bar progress-bar-primary" style="width: 90%;"></div> <div class="add">CSS</div> </div> <div class="progress progress-mini count-outside-primary add-outside"> <div class="count">93%</div> <div class="progress-bar progress-bar-primary" style="width: 93%;"></div> <div class="add">jQuery</div> </div> <div class="progress progress-mini count-outside-primary add-outside"> <div class="count">79%</div> <div class="progress-bar progress-bar-primary" style="width: 79%;"></div> <div class="add">PHP</div> </div> <div class="progress progress-mini count-outside add-outside"> <div class="count">20%</div> <div class="progress-bar" style="width: 20%;"></div> <div class="add">WP</div> </div> <div class="separator bottom"></div> </div> </div> <h5 class="text-uppercase strong text-primary"><i class="icon-group text-regular icon-fixed-width"></i> MosaicPro <span class="text-lowercase strong padding-none">Team</span> <span class="text-lowercase padding-none">(2 people)</span></h5> <ul class="team"> <li><span class="crt">1</span><span class="strong">Adrian Demian</span><span class="muted">Senior Designer</span></li> <li><span class="crt">2</span><span class="strong">Laza Bogdan</span><span class="muted">Senior Developer</span></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <!-- // Widget END -->
@import "assets/components/modules/admin/employees/assets/less/employees.less"; @import "assets/components/modules/admin/ui/progress-bars/assets/less/progress-bars.less"; @import "assets/components/core/less/widgets.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less"; @import "http://localhost/shared/components/modules/admin/forms/elements/select2/assets/lib/css/select2.css"; @import "http://localhost/shared/components/modules/admin/forms/elements/select2/assets/custom/less/select2.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
BODY You should include the following scripts at the end of the HTML document, right before the closing </body>
tag.
<script src="assets/components/modules/admin/employees/assets/js/employees.js?v=v1.2.3"></script> <script src="assets/components/modules/admin/forms/elements/select2/assets/lib/js/select2.js?v=v1.2.3"></script> <script src="assets/components/modules/admin/forms/elements/select2/assets/custom/js/select2.init.js?v=v1.2.3"></script>